<template>
	<view class="home">
		<view class="title">
			<view class="logo">
				<image src="../../static/logo.png"></image>
				<view class="select">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">
							<image src="../../static/address.jpg"></image>
							{{array[index]}}
							<image src="../../static/xia.jpg"></image>
						</view>
					</picker>
				</view>
			</view>
			<view class="address">
				<view class="release">
					<view @click="issue" class="btn">发布招工</view>
					<image src="../../static/release.jpg" mode="scaleToFill"></image>
				</view>
			</view>
		</view>

		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="swiper-show">
				<swiper indicator-dots="true" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in bnrUrl" :key="index">
						<image style="width: 100%;" :src="item.url"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="classify">
				<view class="classify-noe">
					<view @click="job(0)" class="architecture">
						<image src="../../static/首页ok_14.jpg" mode=""></image>
						建筑招工
					</view>
					<view @click="job(1)" class="architecture">
						<image src="../../static/首页ok_16.jpg" mode="">
							装修招工
						</image>
					</view>
					<view @click="job(2)" class="architecture">
						<image src="../../static/首页ok_19.jpg" mode="">
							焊工招聘
						</image>
					</view>
					<view @click="job(3)" class="architecture">
						<image src="../../static/首页ok_21.jpg" mode="">
							招聘司机
						</image>
					</view>
					<view @click="generalWorker" class="architecture">
						<image src="../../static/首页ok_23.jpg" mode="">
							工厂招工
						</image>
					</view>
				</view>


				<view class="classify-noe">
					<view @click="machinery" class="architecture">
						<image src="../../static/首页ok_30.jpg" mode=""></image>
						机械租赁
					</view>
					<view @click="goUnderconstruction" class="architecture">
						<image src="../../static/首页ok_31.jpg" mode="">
							在建项目
						</image>
					</view>
					<view class="architecture">
						<image src="../../static/首页ok_32.jpg" mode="">
							工具商城
						</image>
					</view>
					<view @click="goUsed" class="architecture">
						<image src="../../static/首页ok_33.jpg" mode="">
							二手交易
						</image>
					</view>
					<view @click="goPurchase" class="architecture">
						<image src="../../static/首页ok_34.jpg" mode="">
							招标采购
						</image>
					</view>
				</view>
			</view>
			<view class="interactive">
				<view class="dynamic border-right">
					<image src="../../static/首页ok_29.jpg" mode=""></image>
					邀请好友
				</view>
				<view class="dynamic border-right">
					<image src="../../static/首页ok_29-15.jpg" mode=""></image>
					实名查询
				</view>
				<view class="dynamic">
					<image src="../../static/首页ok_29-16.jpg" mode=""></image>
					鱼泡动态
				</view>
			</view>
			<view class="marge">
				<view class="advisory">
					<view class="advisory-fish">
						<view class="fish">鱼泡</view>
						<view class="message">资讯</view>
					</view>
					<view class="sign">：</view>
					<swiper vertical="true" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item>
							<view class="swiper-item">Aasdddddddddddddddddddddddddddddddddddddddddd</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">B</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<view class="new">
				<view class="content">最新招工</view>
				<view class="more-type">更多</view>
			</view>
			<view v-for="(message,index) in messages" :key="index">
				<view @click="person(message.id)">
					<my-recruit :people="message"></my-recruit>
				</view>
			</view>
			<view @click="job(0)" class="recruiting">
				查看更多招工信息
			</view>

			<view class="new">
				<view class="content">最新找活</view>
				<view class="more-type">更多</view>
			</view>
			<view v-for="(item,index) in dataList" :key="index">
				<view @click="goCallingCard">
					<my-personage :people="item"></my-personage>
				</view>
			</view>
			<view @click="goFindPeople" class="recruiting">
				查看更多找活信息
			</view>
			<view class="new">
				<view class="content">最新二手交易</view>
				<view class="more-type">更多</view>
			</view>
			<view v-for="(item,index) in dealList" :key="index">
				<view @click="goUsed">
					<my-used :people="message"></my-used>
				</view>
			</view>
			<view class="recruiting">
				查看更多二手交易信息
			</view>
		</mescroll-body>
		<view class="lotto">
			<image src="../../static/首页3_11.jpg"></image>
		</view>
	</view>
</template>

<script>
	import {
		getPage
	} from '../../api/login.js'
	import myRecruit from '../../components/recruits.vue'
	import mescrollBody from '../../components/mescroll-uni/mescroll-body.vue'
	import myPersonage from '../../components/personage.vue'
	import myUsed from '../../components/my-used.vue'
	export default {
		data() {
			return {
				array: ['广东', '浙江', '湖南', '江西'],
				index: 0,
				type: ["招工", "找活", "二手交易"],
				bnrUrl: [{
					"url": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=151472226,3497652000&fm=26&gp=0.jpg"
				}, {
					"url": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3746149156,3846202622&fm=26&gp=0.jpg"
				}],
				messages: [{
						id: 1,
						title: "测试123456789asdasdaddad",
						top: true,
						image: "../../static/首页ok_29-17.jpg",
						name: "李先生",
						concent: "招聘信息asdasdadadssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss",
						recruiting: true,
						address: "广州",
						time: "2020-10-15 10:03"
					},
					{
						id: 2,
						title: "测试测试123456789",
						top: false,
						image: "../static/首页ok_29-17.jpg",
						name: "",
						concent: "招聘信息",
						recruiting: false,
						address: "广州天河区广州天河区广州天河区广州天河区",
						time: "2020-10-15 10:03"
					},
				],
				dealList: [{
						id: 1,
						title: "测试头部",
						image: "../../static/首页ok_29-17.jpg",
						name: "李先生",
						address: "广州",
						time: "2020-10-15 10:03",
						status: "未成交",
					},
					{
						id: 2,
						title: "测试头部",
						image: "../../static/首页ok_29-17.jpg",
						name: "李先生",
						address: "广州",
						time: "2020-10-15 10:03",
						status: "未成交",
					},
				],

				dataList: [{
						id: 1,
						image: "",
						name: "黎先生",
						sex: "女",
						age: "42",
						label: ["尽职尽责", "吃苦耐劳", "团结协作", "团结协作", "团结协作"],
						typeJob: ["小工/杂工/临时工"],
						text: "测试正文",
						address: "福建厦门",
						profession: "高级工",
					},
					{
						id: 2,
						image: "",
						name: "",
						sex: "女",
						age: "42",
						label: "",
						nation: "汉族",
						seniority: "工龄15年以上",
						nature: "个人",
						typeJob: ["小工/杂工/临时工"],
						text: "测试正文测试正文测试正文测试正文测试正文测试正文测试正文",
						address: "福建厦门",
						profession: "高级工",
					}
				]
			}

		},
		methods: {
			goFindPeople(){
				uni.switchTab({
					url:'../findpeople/findPeople'
				})
			},
			goCallingCard(){
				uni.navigateTo({
					url:'../findpeople/callingCard'
				})
			},
			goUsed(){
				uni.navigateTo({
					url:'../used/message'
				})
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value);
				this.index = e.target.value
			},
			job(temp){
				uni.navigateTo({
					url:"/pages/job/job?temp="+temp
				})
			},
			generalWorker(){
				uni.navigateTo({
					url:"/pages/generalworker/generalWorker"
				})
			},
			machinery(){
				uni.navigateTo({
					url:"/pages/machineryleasing/machineryLeasing"
				})
			},
			issue(){
				uni.navigateTo({
					url:"../employment/release"
				})
			},
			goUnderconstruction(){
				uni.navigateTo({
					url:"../underconstruction/underConstruction"
				})
			},
			goUsed(){
				uni.navigateTo({
					url:"../used/used"
				})
			},
			goPurchase(){
				uni.navigateTo({
					url:"../purchase/purchase"
				})
			}
			
			// 路由 - 跳转
			// goRouter() {
			// 	uni.navigateTo({
			// 		url: "../isVuex/isVuex"
			// 	})
			// }
		},
		components: {
			'myRecruit': myRecruit,
			'myPersonage': myPersonage,
			'myUsed':myUsed,
		},
	};
</script>

<style lang="scss" scoped>
	.home {
		background: #d2d7df;

		.title {
			width: 100vw;
			display: flex;
			align-items: center;
			position: fixed;
			justify-content: space-between;
			z-index: 10;
			background: #FFFFFF;
			padding: 30rpx 20rpx;

			.logo {
				display: flex;
				align-items: center;

				image {
					width: 200rpx;
					height: 80rpx;
				}

				.select {
					display: flex;
					margin-left: 9rpx;
					font-size: 30rpx;

					.uni-input {
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							margin-left: 7rpx;
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}

			.address {
				display: flex;
				align-items: center;
				background: #FFFFFF;

				.release {
					padding: 12rpx 27rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #3479F6;
					border-radius: 66rpx;
					color: #3479F6;
					font-size: 34rpx;
					background: #FFFFFF;

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}

		.classify {
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.classify-noe {
				display: flex;
				justify-content: space-between;

				.architecture {
					display: flex;
					flex-direction: column;
					margin: 20rpx 0;

					image {
						width: 90rpx;
						height: 90rpx;
					}
				}
			}
		}

		.interactive {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0;
			background: #FFFFFF;
			border-bottom: solid 1px #a9a8ac;

			.border-right {
				border-right: solid 1px #a9a8ac;
			}

			.dynamic {
				display: flex;
				margin-right: 10rpx;
				font-size: 34rpx;
				align-items: center;
				padding: 0 10rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}

		.marge {
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
			margin-bottom: 20rpx;

			.advisory {
				display: flex;
				margin-top: 10rpx;
				font-size: 26rpx;
				margin-left: 20rpx;
				align-items: center;

				.sign {
					color: #ff0000;
					font-weight: bold;
					font-size: 50rpx;
				}

				.advisory-fish {
					color: #F0AD4E;
					line-height: 40rpx;
					display: flex;
					border: solid 1px #ff0000;
					font-size: 32rpx;
					align-items: center;
					margin-right: 20rpx;

					.message {
						color: #ff0000;
						padding: 0 6rpx;
					}

					.fish {
						background: #ff0000;
						color: #FFFFFF;
						padding: 0 6rpx;
					}
				}

				swiper {
					height: 4vh;
					width: 500rpx;

					.swiper-item {
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 32rpx;
					}
				}
			}
		}

		.new {
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.content {
				font-size: 38rpx;
				font-weight: bold;
				border-left: solid 3px #007AFF;
				padding: 0 10rpx;
			}

			.more-type {
				font-size: 34rpx;
				color: #646566;
				margin-right: 20rpx;
			}


		}

		.recruiting {
			text-align: center;
			padding: 30rpx;
			background: #FFFFFF;
			color: #007AFF;
			font-size: 38rpx;
			margin-bottom: 20rpx;
		}

		.lotto {
			position: fixed;
			bottom: 250rpx;
			right: 40rpx;

			image {
				width: 120rpx;
				height: 120rpx;
			}
		}

		.swiper-show {
			padding-top: 140rpx;
		}
	}
</style>
